<template>
  <h1>你好</h1>
  <form>
    <label>Username:</label>
    <input id="username" v-model="loginForm.username"><br>
    <br>
    <label>Password:</label>
    <input id="password" type="password" v-model="loginForm.password"><br>
    <br>
    <button @click="login" type="submit">登录</button>
  </form>
<br>
  <div>
    <button @click="add">+</button>
   <input type="text" class="c" v-model="counter">
    <button @click="down">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        age: 18
      },
      counter:0
    }
  },
  methods: {
    login() {
      if (this.loginForm.username == "xlz" && this.loginForm.password == "2.6") {
        alert("登录成功!");
      } else {
        alert("账号或密码错误");
      }
    },
    add(){
      this.counter++
    },
    down(){
      this.counter--
    }
  },
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c{
text-align: center;
}
</style>
